<%--
  Created by IntelliJ IDEA.
  User: 黄志鹏
  Date: 2019/5/26
  Time: 16:09
  员工及管理员录入人脸的页面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <title>设置我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layuiadmin/style/admin.css" media="all">


    <style type="text/css">
        #webcam {
            border: 1px solid #666666;
            width: 320px;
            height: 240px;
        }

        #photos {
            border: 1px solid #666666;
            width: 320px;
            height: 240px;
        }

        .btn {
            width: 320px;
            height: auto;
            margin: 5px 0px;
        }

        .btn input[type=button] {
            width: 150px;
            height: 50px;
            line-height: 50px;
            margin: 3px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">录入人脸</div>
                <div class="layui-card-body" pad15>
                        <div id="webcam"></div>
                        <div class="btn">
                            <input type="hidden" id="empid" value="${employee.empid}"><%-- <input
                                type="button" value="录入人脸" id="saveBtn" class="layui-btn" />--%>
                            <button id="saveBtn" class="layui-btn">录入人脸</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="${path}/layuiadmin/layui/layui.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"
        src="${path}/face/js/jquery.webcam.min.js"></script>
<script type="text/javascript">
    $(function () {
        var w = 320, h = 240;
        var pos = 0, ctx = null, saveCB, image = [];
        var canvas = document.createElement("canvas");
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);

        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;
        /*  console.log(canvas.toDataURL); */
        if (canvas.toDataURL) {

            ctx = canvas.getContext("2d");

            image = ctx.getImageData(0, 0, w, h);

            saveCB = function (data) {

                var col = data.split(";");
                var img = image;

                for (var i = 0; i < w; i++) {
                    var tmp = parseInt(col[i]);
                    img.data[pos + 0] = (tmp >> 16) & 0xff;
                    img.data[pos + 1] = (tmp >> 8) & 0xff;
                    img.data[pos + 2] = tmp & 0xff;
                    img.data[pos + 3] = 0xff;
                    pos += 4;
                }

                if (pos >= 4 * w * h) {
                    ctx.putImageData(img, 0, 0);
                    /* $.post("servlet/CatD", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){
                        console.log("===="+eval(msg));
                        pos = 0;
                        $("#img").attr("src", msg+"");
                    }); */
                    $.ajax({
                        type: "post",
                        url: "${path}/admin.action/entryFace",
                        dataType: "json",
                        data: {
                            type: "pixel",
                            image: canvas.toDataURL("image/png"),
                            empid: $("#empid").val()
                        },
                        success: function (data) {
                            /* alert(data.msg); */
                            if (data.msg == "录入成功") {
                                //alert("人脸录入成功");
                                layer.msg(data.msg,{icon : 1,time : 2000	},function () {
                                    //录入成功 刷新页面
                                    location.reload();
                                });
                            } else {
                                layer.msg(data.msg,{icon : 2,time : 2000	},function () {
                                    //录入成功 刷新页面
                                    location.reload();
                                });
                            }

                            /*  console.log("===="+data);
                             alert("===="+data);
                             pos = 0;
                             $("#img").attr("src", "");
                             $("#img").attr("src", data.url); */
                        }
                    });
                }
            };

        } else {

            saveCB = function (data) {
                image.push(data);

                pos += 4 * w;

                if (pos >= 4 * w * h) {
                    /* $.post("servlet/CatD", {type: "pixel", image: image.join('|')}, function(msg){
                        console.log("+++++"+eval(msg));
                        pos = 0;
                        $("#img").attr("src", msg+"");
                    }); */

                    $.ajax({
                        type: "post",
                        url: "${path}/admin.action/entryFace",
                        dataType: "json",
                        data: {
                            type: "pixel",
                            image: image.join('|'),
                            empid: $("#empid").val()
                        },
                        success: function (data) {
                            /* alert(data.msg);
                            console.log(data.msg) */
                            if (data.msg == "录入成功") {
                                layer.msg(data.msg,{icon : 1,time : 2000	},function () {
                                    //录入成功 刷新页面
                                    location.reload();
                                });
                            } else {
                                layer.msg(data.msg,{icon : 2,time : 2000	},function () {
                                    //录入成功 刷新页面
                                    location.reload();
                                });
                            }
                            /* console.log("+++++"+eval(msg));
                            pos = 0;
                            $("#img").attr("src", msg+""); */
                        }
                    });
                }
            };
        }

        $("#webcam").webcam({
            width: w,
            height: h,
            mode: "callback",
            swffile: "${path}/face/js/jscam_canvas_only.swf",
            onSave: saveCB,

            onCapture: function () {
                webcam.save();
            },

            /*  debug: function (type, string) {
                 console.log(type + ": " + string);
             } */
        });
    });
    });

    //拍照
   /* function savePhoto() {
        webcam.capture();
    }*/
</script>
<script type="text/javascript">
    $("#saveBtn").click(function () {
       $("#saveBtn").attr('disabled','disabled');
        webcam.capture();
    });
</script>

</body>
</html>